	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			background-color: #AC8E27;
		}
		.popupbtn{
			position: absolute;
			top: 40px;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 100px;
			height: 40px;
			background-color: rgb(0,64,165);
			border-radius: 5px;
			color: rgb(225,225,225);
			line-height: 40px;
			font-size: 16px;
			text-align: center;
			cursor: pointer;
			border:none;
			outline: none;
		}
		.close{
			position: absolute;
			right: 8px;
			top: 0px;
			font-size: 16px;
			user-select: none;
			font-style:normal;
			cursor: pointer;
			color: #fff;
			-webkit-tap-highlight-color:rgba(0,0,0,0);
		}
		.close:hover{
			opacity: .1;
			transform: scale(1.2);
		}
		.btn-ani{
			-webkit-animation-name: anibtn;
			        animation-name: anibtn;
			-webkit-animation-duration: 1s;
			        animation-duration: 1s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		
		
		@-webkit-keyframes anibtn{
			0%  {-webkit-transform:translate(-50%,-50%) scaleX(1);transform:translate(-50%,-50%) scaleX(1);}
			30% {-webkit-transform:translate(-50%,-50%) scale3d(1.25,.75,1);transform:translate(-50%,-50%) scale3d(1.25,.75,1);}
			40% {-webkit-transform:translate(-50%,-50%) scale3d(.75,1.25,1);transform:translate(-50%,-50%) scale3d(.75,1.25,1);}
			50% {-webkit-transform:translate(-50%,-50%) scale3d(1.15,.85,1);transform:translate(-50%,-50%) scale3d(1.15,.85,1)}
			65% {-webkit-transform:translate(-50%,-50%) scale3d(.95,1.05,1);transform:translate(-50%,-50%) scale3d(.95,1.05,1);}
			75% {-webkit-transform:translate(-50%,-50%) scale3d(1.05,.95,1);transform:translate(-50%,-50%) scale3d(1.05,.95,1);}
			100%{-webkit-transform:translate(-50%,-50%) scaleX(1);transform:translate(-50%,-50%) scaleX(1);}
		}
		@keyframes anibtn{
			0%  {-webkit-transform:translate(-50%,-50%) scaleX(1);transform:translate(-50%,-50%) scaleX(1);}
			30% {-webkit-transform:translate(-50%,-50%) scale3d(1.25,.75,1);transform:translate(-50%,-50%) scale3d(1.25,.75,1);}
			40% {-webkit-transform:translate(-50%,-50%) scale3d(.75,1.25,1);transform:translate(-50%,-50%) scale3d(.75,1.25,1);}
			50% {-webkit-transform:translate(-50%,-50%) scale3d(1.15,.85,1);transform:translate(-50%,-50%) scale3d(1.15,.85,1)}
			65% {-webkit-transform:translate(-50%,-50%) scale3d(.95,1.05,1);transform:translate(-50%,-50%) scale3d(.95,1.05,1);}
			75% {-webkit-transform:translate(-50%,-50%) scale3d(1.05,.95,1);transform:translate(-50%,-50%) scale3d(1.05,.95,1);}
			100%{-webkit-transform:translate(-50%,-50%) scaleX(1);transform:translate(-50%,-50%) scaleX(1);}
		}
		.close-ani{
			-webkit-animation-name: aniclose;
			        animation-name: aniclose;
			-webkit-animation-duration: 0.6s;
			        animation-duration: 0.6s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		@-webkit-keyframes aniclose{
			0% {bottom: 0}
			100%{bottom: -60vh}
		}
		@keyframes aniclose{
			0% {bottom: 0;left: 0}
			100%{bottom: -60vh;left: -100vw}
		}
		.popuptotop-ani{
			-webkit-animation-name: anipopuptop;
			        animation-name: anipopuptop;
			-webkit-animation-duration: 1s;
			        animation-duration: 1s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		@-webkit-keyframes anipopuptop{
			0% {bottom: -60vh}
			50% {bottom: -4vh}
			65% {bottom: -4.5vh}
			75% {bottom: -1vh}
			100%{bottom: 0}
		}
		@keyframes anipopuptop{
			0% {bottom: -60vh;left:0;}
			50% {bottom: -4vh;left:0;}
			65% {bottom: -4.5vh;left:0;}
			75% {bottom: -1vh;left:0;}
			100%{bottom: 0;left:0;}
		}
		.popuptoleft-ani{
			-webkit-animation-name: anipopupleft;
			        animation-name: anipopupleft;
			-webkit-animation-duration: 1s;
			        animation-duration: 1s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		@keyframes anipopupleft{
			0% {left: -100vw;bottom: 0}
			50% {left: -4vw;bottom: 0}
			65% {left: -4.5vw;bottom: 0}
			75% {left: -1vw;bottom: 0}
			100%{left: 0;bottom: 0}
		}
		.popuptoright-ani{
			-webkit-animation-name: anipopupright;
			        animation-name: anipopupright;
			-webkit-animation-duration: 1s;
			        animation-duration: 1s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		@keyframes anipopupright{
			0% {left: 100vw;bottom: 0;}
			50% {left: 4vw;bottom: 0;}
			65% {left: 4.5vw;bottom: 0;}
			75% {left: 1vw;bottom: 0;}
			100%{left: 0;bottom: 0;}
		}
		.popuptobottom-ani{
			-webkit-animation-name: anipopupbottom;
			        animation-name: anipopupbottom;
			-webkit-animation-duration: 1s;
			        animation-duration: 1s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
		}
		@keyframes anipopupbottom{
			0% {bottom: 100vh;left:0;}
			50% {bottom: -4vh;left:0;}
			65% {bottom: -4.5vh;left:0;}
			75% {bottom: -1vh;left:0;}
			100%{bottom: 0;left:0;}
		}
	</style>


	<!-- ugc / 非全屏弹出框 start-->
	<button class="popupbtn" data-openani='popuptotop-ani' data-btnani='btn-ani'>向上</button>
	
	<div class="popup"  data-closeani='close-ani' style="position: fixed;left:-100vw;bottom:-60vh;height: 60vh;width: 100%;background-color: #000;opacity: 0.5;border-top-left-radius: 10px;border-top-right-radius: 10px;color: #fff">
		<i class="close">&#10005;</i>
		<p style="text-align: center;line-height: 60vh">This is a meaningless sentence</p>
	</div>

	<script type="text/javascript">
		//阻止弹出框的点击事件冒泡
		$('.popup').click(function(event){
			event.stopPropagation();
		});
		//点击除了弹出框以及触发弹出框弹出的按钮，使弹出框的返回
		$(document).click(function(event){
			var popup=$('.popup'),
			popup_closeani=popup.data('closeani'),
			btn=$('.popupbtn'),
			popup_openani=btn.data('openani'),
			target=$(event.target);
			if ($(target).hasClass('popup')) {
				return false;
			}
			//如果当前弹出框是出现状态，则点击后触发弹框返回
			if(popup.hasClass(popup_openani)||!popup.hasClass(popup_closeani)){
				popup.removeClass(popup_openani).addClass(popup_closeani);
			}
		});
		//按钮事件
		$('.popupbtn').on('click',function(event){
			//阻止冒泡
			 
			var popup=$('.popup'),
			popup_closeani=popup.data('closeani'),
			btn=$(this),
			btnani=btn.data('btnani'),
			popup_openani=btn.data('openani');
			popup.removeClass(popup_openani).removeClass(popup_closeani);
			btn.removeClass(btnani);
			setTimeout(function(){
				popup.addClass(popup_openani);
				btn.addClass(btnani);
			});
		});
		//弹出框的关闭按钮事件
		$('.close').on('click',function(event){
			//阻止冒泡
			event.stopPropagation();
			var popup=$('.popup'),
			popup_closeani=popup.data('closeani'),
			btn=$('.popupbtn'),
			popup_openani=btn.data('openani');
			popup.removeClass(popup_openani).addClass(popup_closeani);
			
		});
		
	</script>
	<!-- ugc / 非全屏弹出框 end-->